<template>
  <div class="img-viewer-box">
    <el-image-viewer
      v-if="state.visible"
      :url-list="props.imgs"
      @close="close"
      :z-index="8888"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useVModel } from "@vueuse/core";
const props = defineProps<{
  modelValue: boolean;
  imgs: string[];
}>();
const emits = defineEmits<{
  (e: "update:modelValue", data: boolean);
}>();
const state = reactive({
  imgList: [],
  // 相当于是set 与 get
  visible: useVModel(props, "modelValue", emits),
});

// 点击关闭的时候，连同小图一起关闭
function close() {
  state.visible = false;
}
</script>

<style scoped lang="scss">
.img-viewer-box {
  z-index: 8888;
  position: relative;

  :deep(img) {
    width: clamp(50rem, 41.67vw, 100rem);
    height: clamp(37.5rem, 31.25vw, 75rem);
  }
}
.img-viewer-box {
  :deep(.el-image-viewer__close) {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(clamp(27.5rem, 22.92vw, 55rem));
  }
}
</style>
